@charset "UTF-8";

/*aaaaaa*/
.ai-center {
	align-items: center;
}

/*bbbbbb*/

/* border */
.b-1 {
	border: 1px;
}

.b-2 {
	border: 2px;
}

.b-3 {
	border: 3px;
}

.bs-s {
	border-style: solid;
}

.bs-d {
	border-style: dashed;
}

.border-gray {
	border: 1px gray solid;
}

.border-white {
	border: 1px white solid;
}

.border-black {
	border: 1px black solid;
}

/*background-color*/
.bac-red {
	background-color: red;
}

.bac-gray {
	background-color: gray;
}

.bac-white {
	background-color: white;
}

.bac-black {
	background-color: black;
}

/*bomtton*/
.bottom-zero {
	bottom: 0;
}

/*阴影特效*/
.bs-spcl {
	box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
}

.br-1 {
	border-radius: 1px;
}

.br-2 {
	border-radius: 2px;
}

.br-3 {
	border-radius: 3px;
}

.br-4 {
	border-radius: 4px;
}

.br-5 {
	border-radius: 5px;
}

.br-6 {
	border-radius: 6px;
}

.br-10 {
	border-radius: 10px;
}

.br-20 {
	border-radius: 20px;
}

.br-30 {
	border-radius: 30px;
}

.br-40 {
	border-radius: 40px;
}

.br-50 {
	border-radius: 50px;
}

/*cccccc*/
/* cursor */
.c-h {
	cursor: hand;
}

.c-a {
	cursor: auto;
}

.c-d {
	cursor: default;
}

/* color */
.c-gray {
	color: gray;
}

.c-red {
	color: red;
}

.c-black {
	color: black;
}

.c-white {
	color: white;
}

.c-blue {
	color: blue;
}

.c-orange {
	color: orange;
}

.c-green {
	color: green;
}

.c-pink {
	color: pink;
}

.c-purple {
	color: purple;
}

/*dddddd*/
/* display*/
.d-f {
	display: flex;
}

.d-n {
	display: none;
}

.d-b {
	display: block;
}

.d-inlineBlock {
	display: inline-block;
}

/*eeeeee*/

/*ffffff*/
/*flex*/
.f-1 {
	flex: 1;
}

.f-2 {
	flex: 2;
}

.f-3 {
	flex: 3;
}

.f-4 {
	flex: 4;
}

.f-5 {
	flex: 5;
}

/* float-left */
.f-left {
	float: left;
}

.f-right {
	float: right;
}

/* f-a */
/* b */
/* c */
/* d */
/* e */
/* f */
/* g */
/* h */
/* i */
/* j */
/* k */
/* l */
/* m */
/* n */
/* o */
/* p */
/* q */
/* r */
/* f-s */
/* font-size px */
.fs-1 {
	font-size: 1px;
}
.fs-4 {
	font-size: 4px;
}
.fs-5 {
	font-size: 5px;
}
.fs-8 {
	font-size: 8px;
}

.fs-10 {
	font-size: 10px;
}
.fs-11 {
	font-size: 11px;
}
.fs-12 {
	font-size: 12px;
}
.fs-13 {
	font-size: 13px;
}
.fs-14 {
	font-size: 14px;
}
.fs-15 {
	font-size: 15px;
}

.fs-16 {
	font-size: 16px;
}
.fs-18 {
	font-size: 18px;
}

.fs-20 {
	font-size: 20px;
}
.fs-22 {
	font-size: 22px;
}

.fs-25 {
	font-size: 25px;
}

.fs-30 {
	font-size: 30px;
}

.fs-35 {
	font-size: 35px;
}

.fs-40 {
	font-size: 40px;
}


/* t */
/* u */
/* v */
/* f-w */
/* font-weight */
.fw-100 {
	font-weight: 100;
}

.fw-bold {
	font-weight: bold;
}

.flw-wrap {
	flex-wrap: wrap;
}

/* x */
/* y */
/* z */


/*gggggg*/

/*hhhhhh*/
/*height*/
.h-5 {
	height: 5px;
}

.h-10 {
	height: 10px;
}

.h-15 {
	height: 15px;
}

.h-16 {
	height: 16px;
}

.h-20 {
	height: 20px;
}

.h-30 {
	height: 30px;
}

.h-40 {
	height: 40px;
}

.h-50 {
	height: 50px;
}

.h-60 {
	height: 60px;
}

.h-90 {
	height: 90px;
}

.h-full {
	height: 100%;
}

/*iiiiii*/
/*jjjjjj*/
.jc-end {
	justify-content: end;
}

.jc-start {
	justify-content: start;
}

.jc-center {
	justify-content: center;
}
.jc-spaceAround{
	justify-content: space-around;
}
.jc-spaceBetween{
	justify-content: space-between;
}
.jc-spaceEvenly{
	justify-content: space-evenly;
}
/*kkkkkk*/
/*llllll*/
.l-zero {
	left: 0;
}

.l-5 {
	left: 5px;
}

.l-10 {
	left: 10px;
}

.l-20 {
	left: 20px;
}

.l-30 {
	left: 30px;
}

.l-40 {
	left: 40px;
}

.l-50 {
	left: 50px;
}

/*line height*/
.lh-10 {
	line-height: 10px;
}

.lh-16 {
	line-height: 16px;
}

.lh-20 {
	line-height: 20px;
}

.lh-30 {
	line-height: 30px;
}

.lh-60 {
	line-height: 60px;
}

/*mmmmmm*/
/* margin px*/
.m-a {
	margin: auto;
}

.m-5 {
	margin: 5px;
}

.m-10 {
	margin: 10px;
}

.m-15 {
	margin: 15px;
}

.m-20 {
	margin: 20px;
}

/* marginTop px */
.mt-5 {
	margin-top: 5px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-20 {
	margin-top: 20px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-60 {
	margin-top: 60px;
}

.mt-70 {
	margin-top: 70px;
}

.mt-80 {
	margin-top: 80px;
}

/* margin bottom */
.mb-5 {

	margin-bottom: 5px;
}

.mb-10 {

	margin-bottom: 10px;
}

.mb-20 {

	margin-bottom: 20px;
}

.mb-30 {

	margin-bottom: 30px;
}


.mb-40 {

	margin-bottom: 40px;
}

.mb-50 {

	margin-bottom: 50px;
}
.mtb-10{
	margin-top: 10px;
	margin-bottom: 10px;
}

.ml-zero {
	margin-left: 0;
}

.ml-10 {
	margin-left: 10px;
}

.ml-20 {
	margin-left: 20px;
}

.ml-30 {
	margin-left: 30px;
}

.ml-40 {
	margin-left: 40px;
}

.ml-50 {
	margin-left: 50px;
}

.ml-60 {
	margin-left: 60px;
}
.ml-auto{
	margin-left: auto;
}
.mr-auto{
	margin-right: auto;
}
/*nnnnnn*/
/*oooooo*/
.o-1 {
	opacity: 0.1;
}

.o-2 {
	opacity: 0.2;
}

.o-3 {
	opacity: 0.3;
}

.o-h {
	overflow: hidden;
}

/*隐藏多余文字，改...*/
.o-spcl {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.o-spcl1{
	overflow: hidden;
	text-overflow: ellipsis;
}

.o-a {
	overflow: auto;
}

/*pppppp*/
/* padding px*/
.p-5 {
	padding: 5px;
}

.p-10 {
	padding: 10px;
}

.p-15 {
	padding: 15px;
}

.p-20 {
	padding: 20px;
}

.p-30 {
	padding: 30px;
}

.p-a {
	padding: auto;
}
/* pointer-events */
.pe-none{
	pointer-events:none;
}
/* padding-left */
.pl-5 {
	padding-left: 5px;
}

.pl-10 {
	padding-left: 10px;
}

.pl-20 {
	padding-left: 20px;
}

.pl-30 {
	padding-left: 30px;
}

.pl-40 {
	padding-left: 40px;
}

.pl-50 {
	padding-left: 50px;
}

.pl-60 {
	padding-left: 60px;
}

.plr-5 {
	padding-left: 5px;
	padding-right: 5px;
}

.plr-10 {
	padding-left: 10px;
	padding-right: 10px;
}
.plr-15 {
	padding-left: 15px;
	padding-right: 15px;
}
.plr-20 {
	padding-left: 20px;
	padding-right: 20px;
}

.plr-30 {
	padding-left: 30px;
	padding-right: 30px;
}

.plr-40 {
	padding-left: 40px;
	padding-right: 40px;
}

.plr-50 {
	padding-left: 50px;
	padding-right: 50px;
}

/* rpx */
.pl-5r {
	padding-left: 5 rpx;
}

/* upx */
.pl-5u {
	padding-left: 5 upx;
}

/* padding right */
.pr-10 {
	padding-right: 10px;
}

.pr-20 {
	padding-right: 20px;
}

.pr-30 {
	padding-right: 30px;
}

.pr-40 {
	padding-right: 40px;

}

.pr-50 {
	padding-right: 50px;
}

/* padding-top */
.pt-10 {
	padding-top: 10px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-30 {
	padding-top: 30px;
}

.pt-40 {
	padding-top: 40px;
}

/*position*/
.p-absolute {
	position: absolute;
}

.p-relative {
	position: relative;
}

.p-fixed {
	position: fixed;
}


/*qqqqqq*/
/*rrrrrr*/
.r-5 {
	right: 5px;
}

.r-10 {
	right: 10px;
}

.r-20 {
	right: 20px;
}

.r-30 {
	right: 30px;
}

.r-40 {
	right: 40px;
}

.r-50 {
	right: 50px;
}

.r-60 {
	right: 60px;
}

.r-zero {
	right: 0;
}

/*ssssss*/
/* 分割线 横向 */
.sl-h{
	border: 0;
	background-color: #EEEEEE;
	height: 1px;
	width: 100%;
	display: block;
}
/*tttttt*/
.t-zero {
	top: 0;
}
.t-half{
	top: 50%;
}

.t-5 {
	top: 5px;
}

.t-10 {
	top: 10px;
}

.t-20 {
	top: 20px;
}

.t-30 {
	top: 30px;
}

.t-40 {
	top: 40px;
}

/* text-align */
.ta-c {
	text-align: center;
}

.ta-l {
	text-align: left;
}

.ta-r {
	text-align: right;
}

.ta-s {
	text-align: start;
}

/*uuuuuu*/
/*vvvvvv*/
.va-middle {
	vertical-align: middle;
}

/*wwwwww*/
.ws-n {
	white-space: nowrap;
}

/*width*/
.w-5 {
	width: 5px;
}

.w-10 {
	width: 10px;
}

.w-20 {
	width: 20px;
}

.w-30 {
	width: 30px;
}

.w-40 {
	width: 40px;
}

.w-60 {
	width: 60px;
}

.w-200 {
	width: 200px;
}

.w-250 {
	width: 250px;
}


.w-300 {
	width: 300px;
}

.w-400 {
	width: 400px;
}

.w-full {
	width: 100%;
}

/*xxxxxx*/

/*yyyyyy*/

/*zzzzzz*/
.zi-99 {
	z-index: 99;
}

.zi-999 {
	z-index: 999;
}

.zi-9999 {
	z-index: 9999;
}

.zi-99999 {
	z-index: 99999;
}

/* 事件 */
.hover-bShadow:hover {
	box-shadow: rgb(0 0 0 / 20%) 15px 15px 5px -5px;
	-webkit-box-shadow:rgb(0 0 0 / 20%) 15px 15px 5px -5px;
	transition: all 300ms; 
}
.hover-bShadow1:hover {
	box-shadow: rgb(0 0 0 / 5%) 5px 5px 0 0;
	-webkit-box-shadow:rgb(0 0 0 / 5%) 5px 5px 0 0;
	transition: all 300ms; 
}
.hover-bShadow2:hover {
	box-shadow: rgb(150 150 150 / 10%) 0 0 20px 0;
	-webkit-box-shadow:rgb(150 150 150 / 10%) 0 0 20px 0;
	transition: all 300ms; 
}
.hover-bShadow3:hover {
	box-shadow: rgb(0 0 0 / 10%) 0 15px 35px 0, rgb(0 0 0 / 7%) 0 3px 10px 0;
	-webkit-box-shadow:rgb(0 0 0 / 10%) 0 15px 35px 0, rgb(0 0 0 / 7%) 0 3px 10px 0;
	transition: all 300ms; 
}
.hover-bShadow4:hover {
	box-shadow: rgb(0 0 0 / 20%) 0 15px 5px -12px;
	-webkit-box-shadow:rgb(0 0 0 / 20%) 0 15px 5px -12px;
	transition: all 300ms; 
}

.hover-bShadow5:hover {
	box-shadow: rgb(0 0 0 / 5%) 5px 5px 0 0;
	-webkit-box-shadow:rgb(0 0 0 / 5%) 5px 5px 0 0;
	transition: all 300ms; 
}
.hover-bShadow6:hover {
	box-shadow:rgb(0 0 0 / 9%) 0 -6px 9px 0;
	-webkit-box-shadow:rgb(0 0 0 / 9%) 0 -6px 9px 0;
	transition: all 300ms; 
	
}
.hover-bShadow31:hover {
	box-shadow:rgb(50 50 50 / 14%) 2px -4px 6px 1px;
	-webkit-box-shadow:rgb(50 50 50 / 14%) 2px -4px 6px 1px;
	transition: all 300ms; 
	
}


.hover-opacity:hover{
	opacity: 0.8;
}

.hover_bc-gray:hover {
	background-color: gray;
}

.hover_cursor-default:hover {
	cursor: default;
}

.hover_cursor-hand:hover {
	cursor: hand;
}

.hover_cursor-unset:hover {
	cursor: unset;
}

.hover_cursor-pointer:hover {
	cursor: pointer;
}

/*** 组合样式 ***/
.xxbb-icon {
	display: inline-table;
	vertical-align: middle;
	margin: auto;
}

.xxbb-btn {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	border: 0;
	outline: none;
	border-radius: 5px;
	border: 1px solid lightgray;
}

.xxbb-btn:focus {
	outline: 0;
}

.xxbb-btn:hover {
	opacity: 0.9;
}

.xxbb-btn:active {
	background-color: #3d98ee;
	color: white;
}

.xxbb-boxInsetShadow {
	box-shadow: inset 0px 0px 5px 1px #000set;
}

/* 画圆 一定要设置长宽*/
.xxbb-round {
	width: 100px;
	height: 100px;
	background-color: red;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
}


/*** 响应式布局 ***/
/*** 超小屏幕（手机显示器，小于 768px）***/
/***xs***/
/* 该分辨率是为了配合layui */
.xs_ta-c {
	text-align: center;
}

.xs_ta-l {
	text-align: left;
}

.xs_ta-r {
	text-align: right;
}


/*** 小屏幕（平板显示器，大于等于 768px）***/
/***sm***/
/* 该分辨率是为了配合layui */
@media (min-width: 768px) {
	* {}

	.sm_ta-c {
		text-align: center;
	}

	.sm_ta-l {
		text-align: left;
	}

	.sm_ta-r {
		text-align: right;
	}
}

/* 大屏幕（桌面显示器，大于等于 992px） md*/
/* 该分辨率是为了配合layui */
@media (min-width: 992px) {
	* {}

	.md_ta-c {
		text-align: center;
	}

	.md_ta-l {
		text-align: left;
	}

	.md_ta-r {
		text-align: right;
	}
}

/* 超大屏幕（超大桌面显示器，大于等于 1200px） lg*/
/* 该分辨率是为了配合layui */
@media (min-width: 1200px) {
	* {}

	.lg_ta-c {
		text-align: center;
	}

	.lg_ta-l {
		text-align: left;
	}

	.lg_ta-r {
		text-align: right;
	}
}
